<template>
  <div class="index-wrapper">
    <!--banner图-->
    <div class='index-banner-wrap'>
      <div class="swiper-container index-banner-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"  v-for="(item, index) in bannerList" :key="index">
            <a :href="item.url">
              <img :src="baseUrl.CDNimgUrl + item.image">
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!--内容-->
    <div class="index-main-wrap padding-12">
      <!--直播-->
      <div class="mime-live-wrap">
        <!--标题-->
        <van-row v-if="mimeLiveShow">
          <van-col span="20">
            <h2 style="margin-top: 10px;margin-bottom: 5px">
              图谱直播
              <i class="mime-list-icon"></i>
              <span class="mime-list-text">实时在线互动</span>
            </h2>
          </van-col>
        </van-row>
        <div class="swiper-container index-live-swiper" v-if="mimeLiveShow">
          <div class="swiper-wrapper index-list">
            <div class="swiper-slide" v-for="(item, index) in mimeLiveList" :key="index">
              <router-link :to="{path:baseUrl.live,query:{id:item.id}}">
                <van-row class="live-shadow border-radius5">
                  <van-col span="9">
                    <div class="live-img border-radius5">
                      <img :src="baseUrl.CDNimgUrl + item.image" />
                      <span>{{item.status}}</span>
                    </div>
                  </van-col>
                  <van-col span="14" offset="1">
                    <div class="live-content">
                      <h4 class="mime-live-list-content-title">{{item.title}}</h4>
                      <p class="live-time">{{item.start_time}} - {{item.end_time}}</p>
                    </div>
                  </van-col>
                </van-row>
              </router-link>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      
      <!--蚂蚁信息-->
      <div class="mime-info-wrap">
        <!--标题-->
        <van-row>
          <van-col span="20">
            <h2>
              健康资讯
              <i class="mime-list-icon"></i>
              <span class="mime-list-text">健康小知识</span>
            </h2>
          </van-col>
          <van-col span="4">
            <div class="more-div-wrap text-align-r">
              <router-link to="/article-list">更多</router-link>
              <i></i>
            </div>
          </van-col>
        </van-row>
        <!--列表-->
        <div style="padding-bottom: 1px">
          <van-row v-for="(item,index) in articleList" :key="index" class="index-list info-list">
            <router-link :to="{path:baseUrl.article,query:{id:item.id}}">
              <van-col span="16">
                <div class="display-table">
                  <div class="display-table-cell">
                    <h4>{{item.title}}</h4>
                    <van-row>
                      <van-col span='16' class="van-ellipsis">
                         <p>发布时间：{{item.created_at}}</p>
                      </van-col>
                      <van-col span='8' class='text-align-r'>
                          <p>
                            <label class="list-icon-see info-list-icon-see"></label>
                            {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人阅读
                          </p>
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </van-col>
              <van-col span="7" offset="1" class="text-align-r">
                <div class="mime-info-list-img border-radius5">
                  <img :src="baseUrl.CDNimgUrl + item.image">
                </div>
              </van-col>
            </router-link>
          </van-row>
        </div>
      </div>
      <!--视频-->
      <div class="mime-video-wrap">
        <!--标题-->
        <van-row>
          <van-col span="20">
            <h2>
              精彩回放
              <i class="mime-list-icon"></i>
              <span class="mime-list-text">精彩回放随时看</span>
            </h2>
          </van-col>
          <van-col span="4">
            <div class="more-div-wrap text-align-r">
              <router-link to="/mime-video-list">更多</router-link>
              <i></i>
            </div>
          </van-col>
        </van-row>
        <!--列表-->
        <van-row gutter="12">
          <van-col span="12" v-for="(item,index) in mimeVideoList" :key="index" class="index-list">
            <router-link :to="{path:baseUrl.video,query:{id:item.id}}">
              <div class="mime-video-list-container">
                <div class="mime-video-list-img border-radius5">
                  <img :src="baseUrl.CDNimgUrl + item.image">
                  <template>
                    <span v-if="item.count <= 1">{{item.timer}}</span>
                    <span v-else>共{{item.count}}集</span>
                  </template>
                </div>
                <div class="mime-video-list-content">
                  <h4 class="mime-video-list-content-title">{{item.title}}</h4>
                  <van-row>
                    <van-col span='12' class="van-ellipsis">
                      <p>{{item.doctor}}</p>
                    </van-col>
                    <van-col span='12' class="text-align-r">
                      <p>
                        <label class="list-icon-see info-list-icon-see"></label>
                        {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人观看
                      </p>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <!--病例-->
      <div class="mime-info-wrap">
        <!--标题-->
        <van-row>
          <van-col span="20">
            <h2>
              病例解读
              <i class="mime-list-icon"></i>
              <span class="mime-list-text">大咖讲病例</span>
            </h2>
          </van-col>
          <van-col span="4">
            <div class="more-div-wrap text-align-r">
              <router-link to="/mime-info-list">更多</router-link>
              <i></i>
            </div>
          </van-col>
        </van-row>
        <!--列表-->
        <div style="padding-bottom: 1px">
          <van-row v-for="(item,index) in mimeInfoList" :key="index" class="index-list info-list">
            <router-link :to="{path:baseUrl.info,query:{id:item.id}}">
              <van-col span="16">
                <div class="display-table">
                  <div class="display-table-cell">
                    <h4>{{item.title}}</h4>
                    <van-row>
                      <van-col span='12' class="van-ellipsis">
                         <p>主讲专家：{{item.doctor}}</p>
                      </van-col>
                      <van-col span='12' class='text-align-r'>
                          <p>
                            <label class="list-icon-see info-list-icon-see"></label>
                            {{item.clicks > 9999 ? (item.clicks/10000).toFixed(1)+'万' : item.clicks}}人阅读
                          </p>
                      </van-col>
                    </van-row>                    
                  </div>
                </div>
              </van-col>
              <van-col span="7" offset="1" class="text-align-r">
                <div class="mime-info-list-img border-radius5">
                  <img :src="baseUrl.CDNimgUrl + item.image">
                </div>
              </van-col>
            </router-link>
          </van-row>
        </div>
      </div>
    </div>
    <!--顶部搜索-->
    <div class="search-head-top">
      <div class="search-input">
        <van-search placeholder="请输入搜索关键词" @focus="onFocus"/>
      </div>
    </div>
    <!--底部导航-->
    <footer-nav :oactive="active"></footer-nav>
  </div>
</template>
<script>
  import ajax from '../../module/ajax/public'
  import Swiper from 'swiper'
  import FooterNav from '@/components/FooterNav'
  import { Row, Col, Tag, Toast, Tab, Tabs, List,Search} from 'vant'
  export default {
    name: 'Index',
    components: {
      FooterNav,
      [Row.name]: Row,
      [Col.name]: Col,
      [Tag.name]: Tag,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [List.name]: List,
      [Search.name]: Search
    },
    mounted(){
      this.getIndexData()
    
    },
    data () {
      return {
        baseUrl: {
          'article': '/article-detail',
          'info': '/mime-info-detail',
          'live': '/mime-live-detail',
          'video': '/mime-video-detail',
          'CDNimgUrl': this.GLOBAL.CDNimgUrl
        },
        active: 0,
        bannerList: [],
        articleList: [],
        mimeLiveList: [],
        mimeInfoList: [],
        mimeVideoList: [],
        mimeLiveShow:true,
      }
    },
    methods: {
      getIndexData () {
        ajax.doAction({
          url: '/index',
          type: 'GET',
          beforeSend:()=> {
            Toast({
              type:'loading',
              duration:0,
              loadingType:'spinner',
              message: '加载中...'
            });
          },
          successCallback: (data) => {
            // console.log(data);
            let datas = data.data
          // banner图
            this.bannerList = datas.bannerList
            this.$nextTick(() => {
              new Swiper('.index-banner-swiper', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                autoplay: 3000,
                autoplayDisableOnInteraction: false,
                loop: true
              })
            })
          // 直播
            this.mimeLiveList = datas.liveList
            if(this.mimeLiveList.length <= 0){
              this.mimeLiveShow = false
            }
            new Swiper('.index-live-swiper', {
              loop: true,
              spaceBetween: 20,
              pagination: '.swiper-pagination',
              paginationClickable: true,
              initialSlide: 0,
              observer: true, // 修改swiper自己或子元素时，自动初始化swiper
              observeParents: true// 修改swiper的父元素时，自动初始化swiper
            })
          //  病例
            this.mimeInfoList = datas.caseList
            // 文章
            this.articleList = datas.articleList
          //  视频
            this.mimeVideoList = datas.CourseList
          },
          complete:()=> {
            Toast.clear()
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      },
      onFocus(){
        this.$router.push('/search1')
      },
    }
}
</script>
<style>
  .index-wrapper .index-main-wrap{
    padding-bottom: 55px;
    padding-top: 0;
  }
  .index-wrapper .index-banner-wrap{
    height: 137px;
    overflow: hidden;
    padding-top: 54px;
  }
  .index-wrapper .index-banner-swiper{
    height: 100%;
  }
  .index-wrapper .index-banner-swiper .swiper-pagination-bullet-active{
    background: #fff;
  }
  .index-wrapper .index-live-swiper{
    height: 108px;
  }
  .index-wrapper .index-live-swiper .swiper-pagination{
    bottom: 0px;
  }
  .mime-live-wrap .swiper-pagination-bullet-active{
    background: #0085ca;
  }
  .index-wrapper .index-main-wrap h2{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .index-wrapper .title-nav-wrap{
    margin: 20px 0;
  }
  .index-wrapper .title-nav-img{
    width: 28px;
    margin:0 auto 6px
  }
  .index-wrapper .title-nav-title{
    color:#808080;
    font-size: 13px;
  }
  .index-wrapper .mime-live-wrap{
    padding: 10px 0;
  }
  .index-wrapper .mime-live-wrap .index-list{
    margin-bottom: 0;
  }
  .index-wrapper .mime-list-icon{
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #808080;
    margin-bottom: 2px;
  }
  .index-wrapper .video-title-left{
    margin-left: 10px;
  }
  .index-wrapper .mime-list-text{
    color: #808080;
    font-size: 11px;
    font-weight: normal;
  }
  .index-wrapper .mime-info-wrap,.index-wrapper .mime-video-wrap,.index-wrapper .mime-audio-wrap,.selected-classroom-wrap{
    margin-top: 20px;
  }
  .index-wrapper .selected-classroom-wrap{
    padding-bottom: 20px;
  }
  .index-wrapper .mime-live-wrap .live-shadow{
    box-shadow: 0 3px 10px 0 rgba(214, 214, 214, 0.5);
    padding: 10px;
    margin-top: 3px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .index-wrapper .mime-live-wrap .live-time{
    margin-bottom: 5px;
  }
  .index-wrapper .mime-live-wrap .live-img{
    height: 70px;
    position: relative;
  }
  .index-wrapper .mime-live-wrap .live-img span{
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    padding: 5px;
    color: #fff;
    border-radius: 0 50px 50px 0;
    background: rgba(0,0,0,.5);
    font-size: 11px;
  }
  .index-wrapper .mime-live-wrap h3{
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
  .index-wrapper .classroom-swiper{
    padding-bottom: 10px;
  }
  .index-wrapper .classroom-slide-container{
    border-radius: 3px;
    background:rgba(255,255,255,1);
    box-shadow:0px 4px 15px 1px rgba(144,165,154,0.16);
    overflow: hidden;
  }
  .index-wrapper .classroom-slide-container .slide-image{
    width: 100%;
    height: 82px;
    position: relative;
  }
  .index-wrapper .classroom-slide-container .slide-image h4{
    font-size: 11px;
    background:linear-gradient(0deg,rgba(255,255,255,0.99) 64%,rgba(255,255,255,0) 100%);
    height: 25px;
    line-height: 35px;
    text-indent: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: normal;
  }
  .index-wrapper .classroom-slide-container .slide-content p{
    color: #808080;
    font-size: 9px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
  }
  .index-search-wrapper{
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    z-index: 999;
    background: #fff;
  }
  .index-search-wrapper .search-right-btn{
    border-left: 1px solid rgba(210, 210, 210, .5);
    text-align: center;
    height: 24px;
    overflow: hidden;
    margin: 10px 0;
    box-sizing: border-box;
  }
  .index-search-wrapper .search-right-btn img{
    width: 16px;
    height: 16px;
    margin: 4px auto;
  }
  .index-search-wrapper .search-tab-nav .van-tabs__line{
    bottom: 20px!important;
  }
   .index-search-wrapper .search-tab-nav .van-tab{
      flex-basis:auto!important;
      flex: 0 0 0;
      padding: 0 7px;
  }
  .index-wrapper .searchTabResult-wrapper{
    position: fixed;
    left: 0;
    top:44px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
  }
  .index-wrapper .searchTabResult-wrapper .van-tabs--line .van-tabs__wrap{
    width: 50%;
    height: 24px;
  }
  .index-wrapper .searchTabResult-wrapper .van-tabs--line .van-tabs__wrap .van-tab{
    line-height: 18px;
  }
  .index-wrapper .searchTabResult-wrapper .van-hairline--top-bottom::after{
    border:0
  }
  .search-head-top{
    position: fixed;
    width: 100%;
    left: 0;
    top:0;
    background: #fff;
    z-index: 999;
  }
  .search-head-top .search-input{
    padding: 12px;
  }
  .search-head-top .search-input .van-search{
    padding: 0!important;
  }
  .search-head-top .search-input .van-search__content{
    background: none;
  }
  .search-head-top .search-input .van-search .van-cell{
    background-color: #F2F3F7;
    border-radius: 30px;
    padding: 3px 10px!important;
  }
  .search-head-top .search-input .van-search__action:active{
    background: none;
  }
  .search-head-top .searchColor{
    color: #0085ca;
  }
</style>
